<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>照片墙</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            width: 100%;
            height: 100%;
        }

        #box {
            width: 100%;
            height: 100%;
        }

        #box ul {
            width: 100%;
            height: 100%;
            list-style: none;
            position: relative;
        }

        #box ul li {
            width: 250px;
            height: 360px;
            position: absolute;
            background-color: #fff;
            transition: all 1s;
            box-shadow: 0 0 3px #000;
        }

        #box li img {
            width: 250px;
            height: 360px;
        }

        #box ul li.curr {
            transform: rotate(0deg) translate(-50%, -50%) scale(1.25) !important;
            left: 50% !important;
            top: 50% !important;
            z-index: 2;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <li><img src="images/01.jpg" alt=""></li>
            <li><img src="images/02.jpg" alt=""></li>
            <li><img src="images/03.jpg" alt=""></li>
            <li><img src="images/04.jpg" alt=""></li>
            <li><img src="images/05.jpg" alt=""></li>
            <li><img src="images/06.jpg" alt=""></li>
            <li><img src="images/07.jpg" alt=""></li>
            <li><img src="images/08.jpg" alt=""></li>
            <li><img src="images/09.jpg" alt=""></li>
            <li><img src="images/10.jpg" alt=""></li>
        </ul>
    </div>
    <script>
        var box = document.getElementById('box');
        var oul = document.querySelector('ul');
        var list = document.querySelectorAll('li');
        var screenW = document.documentElement.clientWidth - 350;
        var screenH = document.documentElement.clientHeight - 350;

        for (var i = 0; i < list.length; i++) {
       
            var x = getRandom(0, screenW);
            var y = getRandom(0, screenH);

            list[i].style.left = x + 'px';
            list[i].style.top = y + 'px';

       
            var angle = getRandom(0, 360);
            list[i].style.transform = 'rotate(' + angle + 'deg)';

    
            list[i].onclick = function () {
     
                for (var i = 0; i < list.length; i++) {
                    list[i].className = '';
                }
     
                this.className = 'curr';
            }
        }

        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
    </script>
</body>

</html>